<!--公司账户-->
<template>
  <div class="myaccount">

    <div class="my_header">
      <i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="$router.back(-1)"></i>
      <div class="top1">我的钱包</div>

    </div>
    <van-cell-group v-show="isShowDetail">
      <van-cell v-show="$store.state.userType==2" title="公司名称" :value="bank.name"/>
      <van-cell v-if="$store.state.userType=='1'" title="开户人" :value="bank.contact"/>
      <van-cell v-if="$store.state.userType=='1'" title="联系电话" :value="bank.mobile"/>
      <van-cell title="开户银行" :value="feedbackname"/>
      <van-cell title="支行" :value="bank.branch"/>
      <van-cell title="银行账号" :value="bank.card"/>
      <van-cell title="支付宝账号" :value="bank.alipay"/>
      <div style="min-height: 2rem" v-show="$store.state.userType==2">
        <div style="float:left;padding-left: 15px;padding-top: 10px">开户许可证</div>
        <div>
          <img class="imgs" :src="yyzzimg" alt="" style="width: 3rem;float: right;height: 2rem;">
        </div>
      </div>
    </van-cell-group>
    <div class="txlist">
      <div v-show="!isShowDetail">
        <div class="row" v-show="$store.state.userType==2">
          <div class="left"><span>*</span>公司名称</div>
          <div class="right"><input type="text" v-model="bank.name" placeholder="公司名称"></div>
        </div>
        <div class="row" v-if="$store.state.userType=='1'">
          <div class="left"><span>*</span>开户名</div>
          <div class="right"><input type="text" v-model="bank.contact" placeholder="请输入开户名"></div>
        </div>
        <div class="row" v-if="$store.state.userType=='1'">
          <div class="left"><span>*</span>联系电话</div>
          <div class="right"><input type="text" v-model="bank.mobile" placeholder="请输入银行预留手机号"></div>
        </div>
        <div class="row" @click="openfeed">
          <div class="left"><span>*</span>开户银行</div>
          <div class="right">
            <!-- <img src="../../../static/imgs/icon_more.png"> -->
            <input v-model="feedbackname" type="text" readonly placeholder="请选择"/>
          </div>
        </div>
        <!-- 开户类型级联 -->
        <van-popup v-model="show" position="bottom" :overlay="false">
          <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" @change="onChange"/>
        </van-popup>
        <div class="row">
          <div class="left"><span>*</span>支行</div>
          <div class="right"><input type="text" v-model="bank.branch" placeholder="请输入开户名称"></div>
        </div>
        <div class="row">
          <div class="left"><span>*</span>银行账号</div>
          <div class="right"><input type="number" v-model="bank.card" placeholder="请输入银行账号"></div>
        </div>
        <div class="row">
          <div id="accpay" class="left">支付宝账号</div>
          <div class="right"><input type="text" v-model="bank.alipay" placeholder="请输入支付宝账号"></div>
        </div>
        <div v-show="$store.state.userType==2">
          <div class="row" style="border-bottom: none;">
            <div class="left" style="width: 60%;"><span>*</span>上传开户许可证</div>

          </div>
          <div class="uploadxkz">
            <div class="scarea">
              <input name="" type="file" @change="preview">
              <img class="imgs" :src="yyzzimg" id="LAY_demo_upload" alt="">
              <!-- <img src="../../../static/icon_pc/icon/icon_add_small.png"> -->
              <div v-show='tos' class="title">开户许可证</div>
            </div>

            <div class="tip"><span>*</span>（图片不能大于2MB）
            </div>
            <div class="tip"><span>*</span>开户许可证的图片必须为清晰原件照片：核准号、企业名称、法人代表、开户行、印章等清晰可辨。上传虚假信息将封禁账号！
            </div>
          </div>
        </div>
      </div>

      <div v-if="bankstatus==1">
        <div class="cancel" disabled="disabled">
          <img class="imgtg" src="static/icon_pc/icon/icon_pass_small.png" alt="">&nbsp;审核通过
        </div>
        <button class="submit1" @click="changeInfo()" v-show="isShowDetail">更改</button>
        <button class="submit1" @click="submittj()" v-show="!isShowDetail">提交</button>
      </div>
      <div v-if="bankstatus==2">
        <div class="cancel" disabled="disabled" style="color: red;">
          <img class="imgtg" src="static/icon_pc/icon/error.png" alt="" style="width: 0.5rem;">&nbsp;审核失败
        </div>
        <button class="submit1" @click="changeInfo()" v-show="isShowDetail">更改</button>
        <button class="submit1" @click="submittj()" v-show="!isShowDetail">提交</button>
      </div>
      <button v-if="bankstatus==0" class="shtg">待审核</button>

      <van-button v-if="bankstatus==4" @click="submittj()" size="large" class="submit1">提 交</van-button>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        tos: true,
        token: '',
        show: false,
        columns: [],
        banklist: [],
        cardList: [],
        feedbackname: '',
        yyzzimg: '',
        status: 4,
        bank: {},
        bankstatus: 4,
        isShowDetail: false
      }
    },
    created() {
      this.$http.get('api/User/index').then(response => {
        this.$store.commit('setUserType', response.data.type);
        console.log('用户类型', this.$store.state.userType);
      })
      this.getBankList();
      // that.gettype(token);
    },
    methods: {
      changeInfo() {   //点击更改按钮
        this.isShowDetail = false;
      },
      getBankList() {      //获取所有的银行列表
        this.$http.get('api/Welcome/bank').then(response => {
          this.getBankInfo();
          this.cardList = response.data;
          if (response.code === 200) {
            for (let i = 0; i < response.data.length; i++) {
              this.columns.push(response.data[i].bank);
            }
            this.banklist = response.data
          }
        }).catch(error => {

        });
      },
      // 开户银行类型选择
      onChange(picker, value, index) {
        var feekid = `${index}`;
        this.cardList.bank_id = this.cardList[feekid].bank_id;
      },
      //   银行类型
      openfeed() {
        this.show = true;
      },
      // 取消
      onCancel() {
        this.show = false;
      },
      // 确定
      onConfirm(value, index) {
        this.feedbackname = `${value}`;
        var bankid = `${index}`;
        this.bank.bank_id = this.banklist[bankid].bank_id;
        this.show = false;
      },

      //银行卡提交
      submittj() {
        var that = this;
        var reg = /^[1][3,4,5,7,8][0-9]{9}$/; //验证手机号正则
        var regcard = /^\d{16}|\d{19}$/ //验证银行卡号
        var regpay = new RegExp("[\\u4E00-\\u9FFF]+", "g") //支付宝验证

        var reghz = new RegExp("[\\u4E00-\\u9FFF]+", "g")
        // console.log(that.bank.bank_id)
        if (that.bank.contact == '') {
          that.$toast("请输入姓名");
          return;
        }

        if (this.$store.state.userType == '1') {
          if (that.bank.mobile == '' || !reg.test(that.bank.mobile)) {
            that.$toast("请输入有效且不为空的联系电话");
            return;
          }
        }
        // else {
        // 	that.$toast("法人联系电话不能为空");
        // 	var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        // 	if(!reg.test(that.bank.mobile)) {
        // 		that.$toast({
        // 			message: '请输入有效的法人联系电话',
        // 		});
        // 	}
        // }

        if (that.cardList.bank_id == '') {
          that.$toast("请选择开户银行");
          return;
        }
        if (that.bank.branch == '') {
          that.$toast("请输入开户支行");
          return;
        }
        if (that.bank.card == '') {
          that.$toast("请输入银行卡号");
          return;
        }

        if (regpay.test(that.bank.alipay) && that.bank.alipay != '') {
          that.$toast({
            message: '输入的支付宝账号不合法',
          });
        }

        if (that.bank.img == "" && this.$store.state.userType == 2) {
          that.$toast({
            message: '请上传开户许可证',
          });
        } else {
          console.log('this.bank', this.bank);
          // this.$http.post('api/User_account/card_add', this.bank).then(response => {
          //   console.log('提交成功', response);
          //
          // }).catch(error => {
          //   console.log('请求失败');
          //   that.$toast({
          //     message: error,
          //     duration: 1500
          //   });
          // });

          $.ajax({
            type: "post",
            url: "http://zcapi.hrgsxt.cn/api/User_account/card_add",
            data: Object.assign({token: localStorage.getItem("token")}, this.bank),
            cache: false,
            dataType: "json",
            success: function (data) {
              if (data.code == 200) {
                that.$toast({
                  message: data.message,
                  duration: 1500
                });
                that.getBankInfo();
              } else {
                console.log('??????????????')
                that.$toast({
                  message: data.message,
                  duration: 1500
                });
              }

            }
          });
        }

      },
      //获取银行卡信息
      getBankInfo() {
        this.$http.get('api/User_account/card_info').then(response => {
          console.log('获取银行卡信息', response);
          if (response.code == 200) {
            for (let item of this.banklist) {
              if (item.bank_id == response.data.card.bank_id) {
                this.feedbackname = item.bank;
              }
            }
            this.bank = response.data.card;
            this.bank.name = response.data.user.name;
            this.yyzzimg = response.data.card.img;
            if (response.data.img != '') {
              this.tos = false
            }
            this.bankstatus = response.data.card.status;
          } else {
            this.bankstatus = 4;
          }

          if (this.bankstatus == 1 || this.bankstatus == 2 || this.bankstatus == 0) {
            this.isShowDetail = true;
          } else {
            this.isShowDetail = false;
          }

        }).catch(error => {

        });
      },
      //上传图片
      preview(file) {
        var that = this;
        let fileSize = file.target.files[0].size;
        if (fileSize < 2048000) {
          console.log(file.target.files[0]);
          var LAY_demo_upload = document.getElementById('LAY_demo_upload');
          if (file.target.files[0]) {
            var reader = new FileReader();
            reader.onload = function (evt) {
              // prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
              var formData = new FormData();
              formData.append("attest_img", file.target.files[0]);
              $.ajax({
                url: 'http://zcapi.hrgsxt.cn/admin/Upload/index',
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                success: function (msg) {

                  console.log(msg, typeof msg);

                  that.bank.img = JSON.parse(msg).data;
                  that.yyzzimg = 'http://zcapi.hrgsxt.cn/' + JSON.parse(msg).data;
                  that.tos = false
                }
              });
            }
            reader.readAsDataURL(file.target.files[0]);
          } else {
            prevDiv.attr("src", file.value);
            // prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
          }
        } else {
          that.$toast("图片不能大于2MB");
        }
      },

    }
  }
</script>

<style scoped>
  .myaccount {
    margin-top: 0.88rem;
  }

  /* 上传图片 */

  .scarea input {
    position: absolute;
    width: 100%;
    right: 0px;
    height: 100%;
    top: 0px;
    opacity: 0;
  }

  .title {
    color: #999;
    position: absolute;
    bottom: .1rem;
    left: 50%;
    margin-left: -.58rem;
  }

  .scarea input {
    position: absolute;
    width: 100%;
    right: 0px;
    height: 100%;
    top: 0px;
    opacity: 0;
  }

  .shtg {
    background-color: #999;
    font-size: 0.34rem;
    color: #FFFFFF;
    width: 90%;
    margin-left: 5%;
    margin-top: 5%;
    height: 0.88rem;
    line-height: 0.88rem;
    border-radius: 12px;
    margin-bottom: .3rem;
  }

  .cancel {
    margin-left: .3rem;
    color: #3EB958;
    margin: 0.2rem 0.4rem;
  }

  .statusbtn .submit {
    background-color: #0085F0;
    margin-left: 25%;
    margin-right: 3%;
  }

  .submit1 {
    background-color: #0085F0;
    font-size: 0.34rem;
    color: #FFFFFF;
    width: 90%;
    margin-left: 5%;
    height: 0.88rem;
    line-height: 0.88rem;
    border-radius: 12px;
    margin-bottom: .3rem;
  }

  .uploadxkz {
    padding-bottom: 0.18rem;
  }

  .uploadxkz .tip {
    color: #999999;
    font-size: 0.24rem;
    margin: 10px 0.35rem 0px 0.5rem;
    line-height: 0.35rem;
  }

  .uploadxkz .tip span {
    color: red;
    margin-left: -8px;
  }

  .uploadxkz {
    width: 100%;
    background-color: #FFFFFF;
  }

  .uploadxkz .scarea {
    width: 2.22rem;
    height: 1.8rem;
    border: 1px solid #E2E2E2;
    text-align: center;
    font-size: 0.24rem;
    margin-left: 0.5rem;
    background-image: url("../../../static/icon_pc/icon/icon_add_small.png");
    background-color: rgb(226, 226, 226);
    background-repeat: no-repeat;
    background-position: 50% 35%;
    overflow: hidden;
    background-size: 0.6rem 0.6rem;
    position: relative;
  }

  .uploadxkz .scarea img {
    margin-top: -10%;
    width: 100%;
    /* width: 2.22rem; */
    /* height: 1.7rem; */
    overflow: hidden;
  }

  .my_header .top1 {
    margin-right: 20px;
  }

  .my_header {
    height: .88rem;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: #fff;
    line-height: .88rem;
    position: fixed;
    padding: 0 .3rem;
    width: 100%;
    z-index: 999;
    top: 0;
  }

  .my_header i {
    font-size: .4rem;
    float: left;
    line-height: .88rem;
  }

  .myaccount .my_header .top1 {
    width: 40%;
    margin-left: 25%;
    float: left;
    text-align: center;
  }

  .myaccount .my_header .cmaccount {
    float: right;
    font-size: 0.28rem;
  }

  .txlist {
    margin-top: 10px;
  }

  .txlist .row {
    width: 100%;
    height: 0.88rem;
    background-color: #FFFFFF;
    line-height: 0.88rem;
    padding: 0px 0.35rem 0px 0.5rem;
    border-bottom: 1px solid #EFEFEF;
  }

  .txlist .row:last-child {
    border-bottom: none;
  }

  .txlist .row .left {
    width: 28%;
    float: left;
    font-size: 0.3rem;
  }

  .txlist .row .left span {
    color: red;
    margin-right: 5px;
    margin-left: -9px;
  }

  .txlist .row .right {
    color: #666666;
    width: 72%;
    float: right;
    font-size: 0.26rem;
    line-height: 0.88rem;
    text-align: right;
    height: 0.88rem;
  }

  .txlist .row .right img {
    width: 0.14rem;
    height: 0.24rem;
    vertical-align: middle;
    margin-left: 7px;
    margin-bottom: 3px;
  }

  .txlist .row .right input {
    border: none;
    outline: none;
    text-align: right;
    padding-right: 0px !important;
  }
</style>
